import React, { Component } from "react";
/*
  受控组件
    操作交由我们自己来控制的组件
    input里面有value属性和onchange事件，那么这个组件就是受控组件
*/

class App extends Component {
  state = {
    textValue: "abc",
  };

  handleChange = (e) => {
    this.setState({
      textValue: e.target.value,
    });
  };

  handleClick = () => {
    console.log(this.state.textValue);
  };

  render() {
    return (
      <>
        <h3>表单的输入绑定</h3>
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange}
        />
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;
